import { useEffect } from 'react'
import type { FormProps } from 'antd';
import { Button, Form, Input, message } from 'antd';
import { useNavigate } from 'react-router-dom';
import request from '../../api/request'
import tokenManager from '../../utils/tokenManager'
import axios from 'axios';
import { UserOutlined, LockOutlined } from '@ant-design/icons'; // 引入 Ant Design 图标
import './Login.css' // 引入Login.css

const Login = () => {
    const navigate = useNavigate();

    type FieldType = {
        username?: string;
        password?: string;
        remember?: string;
    };
    // 百度智能云AI对话功能已移至Tupi1组件
    // 检查是否已经登录
    useEffect(() => {
        const checkLoginStatus = async () => {
            const token = tokenManager.getToken();
            const refreshToken = tokenManager.getRefreshToken();
            
            if (token && refreshToken) {
                try {
                    // 尝试获取有效token（会自动刷新）
                    const validToken = await tokenManager.getValidToken();
                    if (validToken) {
                        navigate('/'); // 已登录，跳转到主页
                    }
                } catch (error) {
                    console.error('Token validation failed:', error);
                    tokenManager.clearTokens();
                }
            }
        };

        checkLoginStatus();
    }, [navigate]);
// 页面一打开，先看看本地有没有保存的登录凭证，有的话就验证一下，有效就直接进主页。
    const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
        try {
            console.log('Login attempt:', values);
            
            // 临时模拟登录成功，用于测试跳转功能
            if (values.username && values.password) {
                console.log('Simulating successful login...');
                
                // 模拟token
                const mockToken = 'mock-access-token-' + Date.now();
                const mockRefreshToken = 'mock-refresh-token-' + Date.now();
                
                // 使用tokenManager存储token
                tokenManager.setToken(mockToken);
                tokenManager.setRefreshToken(mockRefreshToken);
                
                // 设置用户信息和角色
                const role = values.username === 'admin' ? 'admin' : 'user'; // 根据用户名分配角色
                localStorage.setItem('userInfo', JSON.stringify({
                    username: values.username,
                    loginTime: Date.now(),
                    role: role // 存储用户角色
                }));

                console.log('Login successful, navigating to home...');
                message.success('登录成功！');
                navigate('/');
                return;
            }
            
            // 真实API调用（如果后端可用）
            const res = await request.post('/api/login', {
                username: values.username,
                password: values.password
            });

            console.log('Login response:', res);

            if (res.data.accessToken) {
                // 使用tokenManager存储token
                tokenManager.setToken(res.data.accessToken);
                tokenManager.setRefreshToken(res.data.refreshToken);
                
                // 设置用户信息和角色
                const role = res.data.role || 'user'; // 假设后端返回role，否则默认为user
                localStorage.setItem('userInfo', JSON.stringify({
                    username: values.username,
                    loginTime: Date.now(),
                    role: role // 存储用户角色
                }));

                console.log('Login successful, navigating to home...');
                message.success('登录成功！');
                navigate('/');
            } else {
                console.error('No access token in response:', res.data);
                message.error('登录响应异常，请重试');
            }
        } catch (error: unknown) {
            console.error('Login failed:', error);
            const axiosError = error as { response?: { data?: { message?: string } } };
            const errorMessage = axiosError?.response?.data?.message || '登录失败，请检查用户名和密码';
            message.error(errorMessage);
        }
    };
    // ：用户点击登录按钮后，先尝试模拟登录（方便测试），如果模拟登录不成功，就调用真实的后端API。
    return (

        <div className="login-container">
            <div className="login-content">
                <h1 className="login-title">3D数字人智能平台</h1>
                <p className="login-subtitle">Taken figure network intelligence platform</p>
                <div className="login-form-card">
                    <Form
                        name="basic"
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        autoComplete="off"
                    >
                        <Form.Item<FieldType>
                            name="username"
                            rules={[{ required: true, message: '请输入手机号/用户名/邮箱!' }]}
                        >
                            <Input prefix={<UserOutlined />} placeholder="手机号/用户名/邮箱" />
                        </Form.Item>

                        <Form.Item<FieldType>
                            name="password"
                            rules={[{ required: true, message: '请输入密码!' }]}
                        >
                            <Input.Password prefix={<LockOutlined />} placeholder="请输入密码" />
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                    <a onClick={() => navigate('/register')} className="login-register-link">立即注册</a>
                </div>
            </div>
        </div>
    )
}

export default Login
